<template>
    <div class="common_wrap">
        <div class="admin-header admin-top">
            <a href="javascript:;" class="am-fl logo">
                <img src="../assets/images/w-logo.png" alt="">
            </a>
            <p class="am-fl brand am-show-lg-only">仙女矿泉人工智能广告投放和推荐系统</p>
            <ul class="put_kind">
                <li class="am-fr cursorPoint" :class="{active:kindActive===2}" @click="handleKind(2)">
                    <router-link to='/aialrs/adalready?kind=2'>
                        <img src="../assets/images/nav32.png" alt="" v-if="kindActive===2">
                        <img src="../assets/images/nav31.png" alt="" v-else>
                        <span>随机红包投放</span>
                    </router-link>
                </li>
                <li class="am-fr cursorPoint" :class="{active:kindActive===1}" @click="handleKind(1)">
                    <router-link to='/aialrs/adalready?kind=1'>
                        <img src="../assets/images/nav52.png" alt="" v-if="kindActive===1">
                        <img src="../assets/images/nav51.png" alt="" v-else>
                        <span>大数据匹配投放</span>
                    </router-link>
                </li>
                <li class="am-fr cursorPoint" :class="{active:kindActive===0}" @click="handleKind(0)">
                    <router-link to='/aialrs/adalready?kind=0'>
                        <img src="../assets/images/nav42.png" alt="" v-if="kindActive===0">
                        <img src="../assets/images/nav41.png" alt="" v-else>
                        <span>基础数据投放</span>
                    </router-link>
                </li>
            </ul>
        </div>
        <header class="am-topbar am-topbar-inverse admin-header">
            <div class="am-topbar-brand">
                <div class="am-fl user_item"><img class="user_logo" :src="useravater" alt="" srcset=""/></div>
                <div class="am-fl user_item">会员昵称：<span v-html="username"></span></div>
                <div class="am-fl user_item"><img src="../assets/images/userIcon.png" alt="">小毛驴号：<span v-html="usernum"></span></div>
                <div class="am-fl user_item"><img src="../assets/images/balanceIcon.png" alt="">账户余额：<span v-html="balance"></span></div>
            </div>
            <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
                <li @click="handleLoginout()"><a href="javascript:;"><img src="../assets/images/loginOut.png" alt=""> 退出登录 </a></li>
            </ul>
        </header>

        <div class="am-cf admin-main">
            <!-- sidebar start -->
            <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
                <div class="am-offcanvas-bar admin-offcanvas-bar">
                <ul class="am-list admin-sidebar-list am-padding">
                    <li :class="{active:adActive==='adalready'}" @click="handleAd('adalready')">
                        <router-link :to="'/aialrs/adalready?kind='+kindActive">
                            <span class="am-icon-table"></span> 已投放广告</router-link></li>
                    <li :class="{active:adActive==='adupload'}" @click="handleAd('adupload')">
                        <router-link :to="'/aialrs/adupload?kind='+kindActive">
                            <span class="am-icon-upload"></span> 投放广告</router-link></li>
                </ul>
                </div>
            </div>
            <!-- sidebar end -->

            <!-- content start -->
            <div class="admin-content" :style="{'height':viewHeight}">
                <div class="admin-content-body">
                    <div class="am-cf am-padding am-padding-bottom-0">
                        <div class="am-fl am-cf">当前页面 >> <span class="am-text-primary">{{navtitle1}}
                            </span> >> <span class="am-text-primary">{{navtitle2}}</span>
                        </div>
                    </div>
                    <router-view></router-view>
                </div>
                <footer class="admin-content-footer">
                <hr>
                <p class="am-padding-left">© 2018 北京火星小毛驴科技有限公司.</p>
                <br/>
                </footer>

            </div>
            <!-- content end -->
        </div>

        <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

    </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
import '../../static/css/admin.css'
import '../assets/css/common.css'
import {url} from '../../static/config'

axios.defaults.withCredentials = true
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

export default {
  data () {
    return {
      useravater: require('../assets/images/test1.png'),
      username: '火星小毛驴',
      usernum: '123912741',
      balance: '20000/元',
      kindActive: parseInt(this.$route.query.kind) || 0, // 投放种类（头部导航）
      viewHeight: 0,
      adActive: this.$route.query.upload || this.$route.params.pathMatch || 'adalready', // 侧边导航
      navtitle1: '基础数据投放',
      navtitle2: '已投放广告'
    }
  },
  created () {
    var contentScrollHeight = $(document).height() - 209
    this.viewHeight = contentScrollHeight + 'px'

    var routePath = this.$route.path
    if (routePath === '/random') {
      this.kindActive = 2
    } else if (routePath === '/bigdate') {
      this.kindActive = 1
    } else if (routePath === '/basic') {
      this.kindActive = 0
    }
    var _this = this
    // 请求用户基本信息
    axios.post(url + '/web-adv/basicInfo')
      .then(function (res) {
        // console.log('基本信息', res)
        _this.useravater = res.data.companyLogoUrl
        _this.username = res.data.memberName
        _this.usernum = res.data.donkeyNum
        _this.balance = res.data.actualBalance || 0
        if (res.data.error && res.data.error.code === 'NOT_LOGIN') {
          window.location.href = '/'
        }
      })
  },
  methods: {
    handleKind (item) {
      this.kindActive = item
      this.adActive = 'adalready'
      this.navtitle2 = '已投放广告'

      if (item === 2) {
        this.navtitle1 = '随机红包投放'
      } else if (item === 1) {
        this.navtitle1 = '大数据匹配投放'
      } else {
        this.navtitle1 = '基础数据投放'
      }
    },
    handleAd (item) {
      this.adActive = item
      if (item === 'adupload') {
        this.navtitle2 = '投放广告'
      } else {
        this.navtitle2 = '已投放广告'
      }
    },
    handleLoginout () {
      axios.post(url + '/web-adv/loginOut')
        .then(function (res) {
          if (confirm('确认退出登录吗？')) {
            window.location.href = '/'
          };
        })
    }
  }
}
</script>
